<template>
    <div class="singer" v-loading="!singers.length">
        <index-list @select="selectSinger" :data="singers"></index-list>
        <router-view v-slot="{Component}">
            <transition appear name="slide">
                <component :is="Component" :singer="selectdSinger"></component>
            </transition>
        </router-view>
    </div>
</template>

<script>
import {getSinger } from '@/service/singer'
import indexList from '../components/base/index-list/index-list.vue'
import storage from 'good-storage'
import { SINGER_KEY } from '@/assets/js/constant'
export default {
    name: 'singer',
    data() {
        return {
            singers: [],
            selectdSinger: null
        }
    },
    components: {
       indexList
    },
    async created() {
        const result = await getSinger()
        console.log(result)
        this.singers = result.singers
    },
    methods: {
        selectSinger(singer) {
            this.selectdSinger = singer
            this.caacheSinger(singer)
            this.$router.push({
                path: `/singer/${singer.mid}`
            })
        },
        caacheSinger(singer) {
            storage.session.set(SINGER_KEY, singer)
        }
    }

}
</script>

<style lang="scss" scoped>
.singer {
    position: fixed;
    width: 100%;
    top: 88px;
    bottom: 0;
}

</style>